<template>
  <div style="background-color:#fff;padding:10px 20px;">
    <span style="line-height:60px;font-size:20px;">医生管理</span>
    <el-button type="primary" style="float: right;margin-top: 10px;"
               @click="beforeAddDoctor">新建医生</el-button>
  </div>
  <!-- 医生搜索卡片 -->
  <el-card style="margin:20px;height: 70px;">
    <el-form :inline="true">
      <el-form-item label="医生名">
        <el-input placeholder="请输入医生名" style="width:220px;" v-model="searchForm.name"
                  @keydown.enter="select">
        </el-input>
      </el-form-item>

      <el-form-item>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="select">搜索</el-button>
      </el-form-item>
    </el-form>
  </el-card>

  <!-- 医生表格卡片 -->
  <el-card style="margin: 20px;">
    <el-table :data="doctorArr">
      <el-table-column type="index" label="编号" width="80" align="center"></el-table-column>
      <el-table-column prop="name" label="医生姓名" align="center"></el-table-column>
      <el-table-column prop="specialty" label="专业领域" align="center"></el-table-column>
      <el-table-column prop="experience" label="工作经验" align="center"></el-table-column>
      <el-table-column prop="qualification" label="资格证书" align="center"></el-table-column>
      <el-table-column prop="hospital" label="所属医院" align="center"></el-table-column>
      <el-table-column prop="rating" label="评分（1到10）" align="center"></el-table-column>
      <el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button link type="primary" :disabled="scope.row.level==40"
                     @click="editDoctor(scope.row.doctorId)">编辑</el-button>
          <el-button link type="primary" :disabled="scope.row.level==40"
                     @click="deleteDoctor(scope.row.doctorId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>

  <!-- 新建用户弹窗 -->
  <!-- :before-close="handleClose" 在弹窗关闭前先调用handleClose方法来处理弹窗的关闭问题
   避免点击弹窗外部也能关闭弹窗-->
  <el-dialog
      :title="dialogTitle"
      style="width: 1000px;padding: 40px;"
      v-model="dialogVisible"
      :before-close="handleClose"
  >
    <el-form label-position="top" label-width="80px">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="医生姓名">
            <el-input placeholder="请输入医生姓名" v-model="saveDoctorForm.name"
                      :disabled="saveDoctorForm.id != null"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="专业领域">
            <el-input placeholder="请输入专业领域" v-model="saveDoctorForm.specialty"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="工作经验">
            <el-input placeholder="请输入工作经验" v-model="saveDoctorForm.experience"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="资格证书">
            <el-input placeholder="请输入资格证书" v-model="saveDoctorForm.qualification"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属医院">
            <el-input placeholder="请输入资格证书" v-model="saveDoctorForm.hospital"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="评分（1到10）">
            <el-input placeholder="请输入资格证书" v-model="saveDoctorForm.rating"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="saveDoctor">保存</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import {onMounted, ref} from "vue";
import axios from '@/util/request';
import qs from "qs";
import {ElMessage} from "element-plus";
//定义对象用来收集保存表单的所有员工数据
const saveDoctorForm = ref({
  name:'',
  specialty:'',
  experience:'',
  qualification:'',
  hospital:'',
  rating:'',
});
//定义变量控制弹窗是否出现
const dialogVisible = ref(false);
//定义变量用来控制弹窗的标题
const dialogTitle = ref('新建医生');
//处理弹窗关闭的方法
const handleClose = ()=>{
  if(confirm('您确认要关闭本窗口吗?')){
    //关闭弹窗,并清空双向绑定的表单数据
    dialogVisible.value = false;
    saveDoctorForm.value = {};
  }
}
//保存医生数据
const doctorArr = ref([]);
//医生搜索存放
const searchForm = ref({name:''});
//医生搜索
const select =()=>{
  console.log(searchForm.value)
  let data = qs.stringify(searchForm.value);
  //如果有查询条件,就根据后面拼接的条件查,没有条件默认加载所有用户数据
  axios.get('/api/doctor/list?'+data)
      .then((response)=>{//回调函数中处理响应结果
        if(response.data.code == 2000){
          doctorArr.value = response.data.data;//将后端响应数据装入用户数组中
          console.log(doctorArr.value);
        }else{
          ElMessage.error(response.data.msg);
        }
      })
}
//医生重置搜索
const resetSearch = ()=>{
  //清空之前的搜索条件
  searchForm.value = {};
  //重新加载所有的用户数据
  select();
}
//医生编辑
const editDoctor = (doctorId)=>{
  //出弹窗 + 修改弹窗标题
  dialogVisible.value = true;
  dialogTitle.value = '编辑医生信息';
  //根据用户id查询当前用户的详细数据显示在弹窗表单中
  axios.get('/api/doctor/list?id='+doctorId).then((response)=>{
    if(response.data.code == 2000){
      saveDoctorForm.value = response.data.data[0];
    }else{
      ElMessage.error(response.data.msg);
    }
  })

}
//医生删除
const deleteDoctor = (doctorId)=>{
  console.log(doctorId);
  if(confirm('您确认要删除该员工吗?')){
    axios.post('/api/doctor/delete/'+doctorId)
        .then((response)=>{
          if(response.data.code == 2000){
            ElMessage.success('删除成功!');
            select();//重新加载用户数据
          }else{
            ElMessage.error(response.data.msg);
          }
        })
  }

}
/* 页面一加载完毕,立即执行 */
onMounted(()=>{
  select();
})
//保存
const saveDoctor = ()=>{


  console.log(saveDoctorForm.value);
  let data = qs.stringify(saveDoctorForm.value);
  console.log(data);
  /* 此处传的参数是qs转换后的查询字符串data,注意:使用了查询字符串,后端Controller不用加@RequestBody注解!!! */
  axios.post('/api/doctor/save',data)
      .then((response)=>{
        if(response.data.code == 2000){
          ElMessage.success('保存成功!');
          //关闭弹窗,并清空双向绑定的表单数据
          dialogVisible.value = false;
          saveDoctorForm.value = {};
          //保存成功后要重新加载用户数据!
          select();
        }else{
          ElMessage.error(response.data.msg);
        }
      })

}
//新建医生
const beforeAddDoctor = ()=>{
  dialogVisible.value = true;
  dialogTitle.value = '新建医生';
}
</script>

<style scoped>

</style>